<template>
<div class="swiper_walk" v-if="list.length>0&&propValue.swiperList.length>0">
    <div :class="[true? propValue.name+'' : '']"  class="swiper-container  swiper-no-swiping" id="swiper"  v-if="propValueData.tabIndex==0">
        <div class="swiper-wrapper">
                <div class="swiper-slide_one swiper-slide" v-for="(item,i) of list" :key="i">
                    <img :src="item.url" :style="{width:propValue.imgwidth+'rem',height:propValue.imgheight+'rem','margin-bottom':propValue.marginBottom+'rem','margin-top':propValue.marginTop+'rem'}">
                </div>
        </div>
    </div>
    <div  :class="[true? propValue.name+'' : '']"  class="swiper-container  swiper-no-swiping" id="swiper"  v-if="propValueData.tabIndex==1">
        <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,i) of list" :key="i">
                    <img v-for="(ptem,p) of item" :key="p" :src="ptem.url" :style="{width:propValue.imgwidth+'rem',height:propValue.imgheight+'rem','margin-bottom':propValue.marginBottom+'rem','margin-top':propValue.marginTop+'rem'}">
                </div>
        </div>
    </div>

     <div :class="[true? propValue.name+'' : '']"  class="swiper-container  swiper-no-swiping" id="swiper"  v-if="propValueData.tabIndex==2">
        <div class="swiper-wrapper">
                <div class="swiper-slide_one swiper-slide" v-for="(item,i) of list" :key="i">
                    <img :src="item.url" :style="{width:propValue.imgwidth+'rem',height:propValue.imgheight+'rem','margin-bottom':propValue.marginBottom+'rem','margin-top':propValue.marginTop+'rem'}">
                </div>
        </div>
        <div class="swiper-button-prev" >
        </div>
        <div class="swiper-button-next"  >
        </div>
    </div>
</div>

</template>

<script>
export default {
  name: 'Swiper',
   props: {
        propValue: {
            type: Object,
            default: () => {},
        },
        swiperList: {
            type: Array,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            list:null,
            propValueData:{},
            Swiper:{}
        }
    },
    watch:{
        propValue:{
              deep: true,  // 深度监听
              handler(value){
                console.log(value)
               this.changeTab(value)
               this.Swiper.destroy(true,true)
               this.swiperinit(value)
               this.Swiper.update(true)
             }
        },
    },
    created(){
       this.changeTab(this.propValue)
    },
  mounted(){
       this.swiperinit(this.propValue)
  },
  methods:{
    swiperinit(value){
        console.log(value.name,'4789327498327')
         this.Swiper=new Swiper(`.${value.name}`, {
             watchSlidesVisibility: true /*避免出现bug*/,
                slidesPerView: Number(value.slidesPerView), // 设置显示三张
                spaceBetween: 20,
                freeMode: true, // 使幻灯片滑动时不止滑动一格，且不会自动贴合
                slidesPerGroup:Number(value.slidesPerView), //定义1张图片为一组
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                loopFillGroupWithBlank: true,
                //自动切换
                autoplay: {
                    delay: 0,
                    disableOnInteraction: false
                },
                autoplay:value.tabIndex==2?false:true, //可选选项，自动滑动
                navigation: {
                    nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
                loop: true, //允许从第一张到最后一张，或者从最后一张到第一张  循环属性\
                speed:value.tabIndex==2?600:6000*Number(value.slidesPerView), //设置过度时间
            })
    },
    changeTab(value){
        this.propValueData=value
         if(value.tabIndex==1){
                       let newList=[]
           let swiperList=value.swiperList
           console.log(swiperList)
            for(var i=0;i<swiperList.length;i+=2){
                 var arr=[swiperList[i],swiperList[i+1]]
                     newList.push(arr)
            }
            this.list=newList
        }else{
            this.list=value.swiperList
        }
           console.log( this.list)
    },
  }

}
</script>

<style scoped>
.swiper-button-prev:after{
    color:#999
}
.swiper-button-next:after{
    color:#999
}
.swiper_walk{
    width:100%;
    height: 100%;
    margin:0 auto;
}
.swiper_walk .swiper-container{
    height: 100%;
}
.swiper_walk .swiper-slide{
    width: 50%;
    height: 100%;
}
/* .swiper_walk .swiper-slide img{
    margin-bottom: 47px;
} */
.swiper_walk .swiper-slide_one{
    width: 50%;
    height: 100%;
}
.swiper_walk .swiper-wrapper{
 width:100%;
 height: 100%;
}
.swiper_walk .swiper-container-free-mode > .swiper-wrapper {
    transition-timing-function:linear;
}

</style>
